<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">灵璧政协</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
		    <a class="mui-tab-item mui-active">
		        <span class="mui-icon mui-icon-home"></span>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-icon mui-icon-phone"></span>
		        <span class="mui-tab-label">电话</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-icon mui-icon-email"></span>
		        <span class="mui-tab-label">邮件</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-icon mui-icon-gear"></span>
		        <span class="mui-tab-label">设置</span>
		    </a>
		</nav>
		<div class="mui-content">
			<a id="openZx">掌上政协</a>
		</div>

		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {
				var detail2 = mui.preload({
					url: "detail3.html",
					id: "openZx"
				});
				
//				var index = plus.webview.currentWebview();
//				index.append(detail2);
//				mui(".subpage-container").append(detail2);

				document.getElementById('openZx').addEventListener('tap', function() {
					var urlid = this.getAttribute('id');
					var all = plus.webview.all();
					//显示预加载页面
					plus.webview.show(urlid, "slide-in-right", 150);
				});

			});

			document.getElementById('openZx').addEventListener('tap', function() {
				var href="detail2.html";

				//非plus环境，直接走href跳转
				if(!mui.os.plus) {
					location.href = href;
					return;
				}

				var id = this.getAttribute("data-wid");
				if(!id) {
					id = href;
				}

				if(href && ~href.indexOf('.html')) {
					//打开窗口的相关参数
					var options = {
						styles: {
							popGesture: "close"
						},
						extras: {}
					};

					var titleType = this.getAttribute("data-title-type");
					if(titleType && titleType.indexOf("native") > -1) { //原生导航
						options.styles.titleNView = {
							autoBackButton: true,
							backgroundColor: '#f7f7f7',
							titleText: this.innerHTML.trim(),
							splitLine: {
								color: '#cccccc'
							}
						};

						options.show = {
							event: 'loaded'
						}
						//有原生标题的情况下，就不需要waiting框了
						options.waiting = {
							autoShow: false
						}

						//透明渐变导航,增加类型设置
						if(titleType == "transparent_native") {
							options.styles.titleNView.type = "transparent";
						}

					} else {
						//非原生导航，需要设置顶部状态栏占位
						options.styles.statusbar = {
							background: "#f7f7f7"
						}
					}

					//打开新窗口
					mui.openWindow(href, id, options);
				}

			});
		</script>
	</body>

</html>